<template>
  <view class="page">
    <view class="addStock box">
      <view class="title"> 添加可转债持仓 </view>
      <view class="item">
        代码 <input class="input" @change="toCheckBondBond" type="text" maxlength="6" v-model="stock.code" />
      </view>
      <view class="item"> 名字 <input class="input" maxlength="4" disabled type="text" v-model="stock.name" /> </view>
      <view class="item"> 单价 <input class="input" type="text" v-model="stock.purchase_price" /> </view>
      <view class="item"> 数量 <input class="input" type="number" v-model="stock.hold_quantity" /> </view>
      <view class="addBtn">
        <u-button :custom-style="buttonStyle" type="primary" @click="toAddStock" :disabled="!allReady"
          >添加持仓</u-button
        >
      </view>
    </view>
    <view class="tip box">
      <view class=""> *提示: </view>
      <view class="tips"> 为了确保一键换仓的准确性，请正确填写以上数据 </view>
    </view>
  </view>
</template>

<script>
import { checkBond, addStock } from './_api.js';
import { buttonStyle } from '@/common/style';

export default {
  data() {
    return {
      stock: {
        code: '',
        name: '',
        purchase_price: '',
        hold_quantity: 1
      },

      isBond: false
    };
  },

  computed: {
    allReady() {
      if (this.isBond && Number(this.stock.hold_quantity) && Number(this.stock.purchase_price)) {
        return true;
      } else {
        return false;
      }
    },
    buttonStyle() {
      return buttonStyle();
    }
  },

  methods: {
    toCheckBondBond() {
      if (this.stock.code.length < 6) {
        return uni.showToast({
          title: '请输入正确的可转债代码',
          icon: 'none'
        });
      }
      const data = {
        code: this.stock.code
      };
      checkBond(data)
        .then(res => {
          if (res.data.status) {
            this.isBond = true;
            this.stock.name = res.data.name;
          } else {
            uni.showToast({
              title: '请输入正确的可转债代码',
              icon: 'none'
            });
            this.isBond = false;
          }
        })
        .catch(_ => {});
    },

    toAddStock() {
      if (this.allReady) {
        addStock(this.stock)
          .then(res => {
            uni.showToast({
              title: '添加成功',
              icon: 'none'
            });
            setTimeout(() => {
              uni.navigateBack({
                delta: 1
              });
            }, 1500);
          })
          .catch(_ => {});
      } else {
        uni.showToast({
          title: '请输入正确的可转债信息',
          icon: 'none'
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.addStock {
  width: 690rpx;
  margin: 80rpx auto;

  .title {
    text-align: center;
    font-size: 50rpx;
    margin: 30rpx;
  }
  .input {
    display: inline-block;
    width: 320rpx;
    margin-left: 20rpx;
    border-bottom: 2rpx solid #555c60;
  }
  .item {
    width: 575rpx;
    margin: 15rpx auto;
    padding: 10rpx 30rpx 30rpx 10rpx;
    border-bottom: 2rpx solid #f5f5f5;
    text-align: center;
  }
  .addBtn {
    width: 650rpx;
    margin: 50rpx auto;
  }
}
.tip {
  width: 690rpx;
  margin: 30rpx auto;
  padding: 30rpx;
  font-size: 30rpx;

  .tips {
    text-indent: 60rpx;
  }
}
</style>
